<template>
  <div class="shop-cart-page">
    <!-- 头部标题 -->
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="$goBack"  
    />
    <!-- 购物车内容 -->
    <!-- 没有商品 -->

    <div class="empty-box" v-if="shopCarData.length == 0">
      <van-icon name="smile-o" size="50px" />
      <p>购物车空空如也</p>
      <van-button to="/" type="primary" color="#1baeae" style="width: 180px"
        >跳转首页</van-button
      >
    </div>
    <!-- 有商品 -->
    <div class="uempty-box" v-if="shopCarData.length > 0">
      <!-- 购物车列表 -->
       <div class="shop-cart-box">
            <div class="shop-cart-item" v-for="i in 20" :key="i">
                <!-- 多选 -->
                <van-checkbox v-model="checked"></van-checkbox>
                <!-- 图片 -->
                <img src="https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40pro%2B.png" >

                <!--右侧内容  -->
                <div class="right-box">
                    <!-- 头部标题 -->
                     <div class="top">
                        <!-- 标题文字 -->
                         <span >HUAWEI Mate 40 Pro+ 5G 全网通 12G...</span>
                        <!-- 数量 -->
                        <span>X1</span>
                    </div>
                    <!-- 底部价格 -->
                    <div class="bottom" >
                        <!-- 价格信息 -->
                         <span >￥7988</span>
                        <!-- 数量加成 -->
                        <van-stepper v-model="value"  />
                    </div>
                </div>     
            </div>
       </div>

      <!-- 底部结算 -->
      <van-submit-bar :price="798800" button-color="#000" button-text="结算" >
        <van-checkbox v-model="checked">全选</van-checkbox>
      </van-submit-bar>
    </div>

    <!-- 底部导航栏 -->

    <van-tabbar class="shop-cart-tabbar" v-model="active" route placeholder flex>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" badge="1" to="/shopcar"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="user-o" to="">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2,
      shopCarData: [111], //购物车数据
      checked:false,  //全选选中状态
      value:1
    };
  },
};
</script>

<style lang="less">
.uempty-box{
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    .shop-cart-box{
        flex: 1;
        overflow-y:auto ;
        padding: 0 12px;
        .shop-cart-item{
            display: flex;
            align-items: center;
            overflow: hidden;
            img{
                height: 50px;
                margin: 0 16px;
            }
            .right-box{
                flex: 1;
                overflow: hidden;
                .top{
                    display: flex;
                    align-items: center;
                    & span:nth-child(1){
                        flex: 1;
                        margin-right: 10px;
                        // 溢出隐藏 多余部分...表示
                        overflow: hidden;
                        display: block;
                        text-overflow: ellipsis;
                        white-space: nowrap;

                    }

                }
                .bottom{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    span{
                        color: red;
                    }
                }
            }
        }
    }
}
.shop-cart-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.van-submit-bar{
    position: relative;
}
.shop-cart-tabbar{
    position: relative !important;
}
</style>